@include b('range-picker-calendar-input') {
    display: flex;
    gap: getCssVar(spacing, base);
    justify-content: center;
    width: 100vw;
  
    @include e('start') {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: left;
      max-width: 40%;
      padding: getCssVar(spacing, base);
      margin-top: getCssVar(spacing, base);
      text-align: left;
      background-color: getCssVar(color, fill, 3);
  
      @include m('label') {
        position: absolute;
        top: 50%;
        z-index: 1;
        font-size: getCssVar(font-size, header, 4);
        color: getCssVar(color, tertiary);
        transition: all linear 0.1s;
        transform: translateY(-50%);
      }
      @include m('input') {
        margin-top: getCssVar(spacing, base);
        background-color: getCssVar(color, fill, 3);
        opacity: 0;
      }
      @include when('show-input') {
        .#{bem('range-picker-calendar-input','start')} {
          @include m('label') {
            position: absolute;
            top: 0%;
            margin-top: getCssVar(spacing, base);
            font-size: getCssVar(font-size, small);
            color: getCssVar(color, primary);
            transform: unset;
          }
          @include m('input') {
            opacity: 1;
          }
        }
      }
      @include when('focus') {
        border-bottom: 1px solid getCssVar(color, primary);
      }
      @include when('error') {
        border-bottom: 1px solid getCssVar(color, danger);
        .#{bem('range-picker-calendar-input','start')} {
          @include m('label') {
            color: getCssVar(color, danger);
          }
        }
      }
    }
    @include e('end') {
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: start;
      justify-content: left;
      max-width: 40%;
      padding: getCssVar(spacing, base);
      margin-top: getCssVar(spacing, base);
      text-align: left;
      background-color: getCssVar(color, fill, 3);
  
      @include m('label') {
        position: absolute;
        top: 50%;
        z-index: 1;
        font-size: getCssVar(font-size, header, 4);
        color: getCssVar(color, tertiary);
        transition: all linear 0.1s;
        transform: translateY(-50%);
      }
      @include m('input') {
        margin-top: getCssVar(spacing, base);
        background-color: getCssVar(color, fill, 3);
        opacity: 0;
      }
      @include when('show-input') {
        .#{bem('range-picker-calendar-input','end')} {
          @include m('label') {
            position: absolute;
            top: 0%;
            margin-top: getCssVar(spacing, base);
            font-size: getCssVar(font-size, small);
            color: getCssVar(color, primary);
            transform: unset;
          }
          @include m('input') {
            opacity: 1;
          }
        }
      }
      @include when('focus') {
        border-bottom: 1px solid getCssVar(color, primary);
      }
      @include when('error') {
        border-bottom: 1px solid getCssVar(color, danger);
        .#{bem('range-picker-calendar-input','end')} {
          @include m('label') {
            color: getCssVar(color, danger);
          }
        }
      }
    }
  
    @include e('error') {
      position: absolute;
      top: calc(100% + getCssVar(spacing,tight));
      font-size: getCssVar(font-size, small);
      color: getCssVar(color, danger);
      white-space: pre-line;
    }
  }